<template>
  <el-card shadow="never">
    <el-row :gutter="20">
      <el-col :span="16" style="border-right: 1px solid rgb(183 180 180 / 0.34)">
        <el-row :gutter="20" style="border-bottom: 1px solid rgb(183 180 180 / 0.34);padding-bottom: 30px">
          <el-col :span="12">
            <p class="title-p">告警图片</p>
            <el-image class="imgbox" :src="imgUrl(dataBusForm.picUrlMin)"
                      :preview-src-list="[imgUrl(dataBusForm.picUrl)]"></el-image>
          </el-col>
          <el-col :span="12">
            <p class="title-p">告警视频</p>
            <div class="imgbox" style="position: relative">
              <LivePlayer aspect="fullscreen" :videoUrl="dataBusForm.flvUrl" fluent autoplay controls stretch
                          dblclick-fullscreen>
              </LivePlayer>
            </div>
          </el-col>
        </el-row>
        <p class="title-p">警情信息</p>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属杆塔:">
              <span class="item-text">{{ dataBusForm.stationName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通道预置位:">
              <span class="item-text">{{ dataBusForm.channelNo }}-{{ dataBusForm.presettingNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传时间:">
              <span class="item-text">{{ dataBusForm.uploadDate }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保存时间:">
              <span class="item-text">{{ dataBusForm.createDate }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="dataBusForm.warningType">
            <el-form-item label="告警类型:">
              <el-tag style="margin-right: 4px;margin-bottom: 2px" type="warning" size="small" effect="plain"
                      v-for="(item ,index) in warningTypeArr(dataBusForm.warningType)" :key="index">
                {{ getDictLabel("waring_type", item) }}
              </el-tag>
              <!--                <span class="item-text">{{ getDictLabel("kx_img_alarm_level", dataBasicsForm.level) }}</span>-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报警等级:" prop="deviceName">
              {{ getDictLabel("kx_img_alarm_level", dataBusForm.level) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理状态:" prop="deviceName">
              {{ getDictLabel("alarm_process_status", dataBusForm.processingStatus) }}
            </el-form-item>
          </el-col>
          <el-col :span="24" style="text-align: center" v-if="dataBusForm.processingStatus == 'Processing'">
            <el-button style="padding: 0 50px" type="warning" @click="disposeVisible = true">去处理</el-button>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="8">
        <p class="title-p">处警经过</p>
        <el-empty v-if="flowList.length == 0" description="暂未处理"/>
        <el-timeline style="width: 100%">
          <el-timeline-item color="#0bbd87" v-for="(item,index) in flowList" :key="index" :timestamp="item.endTime"
                            placement="top">
            <el-card>
              <h4>{{ item.activityName }}</h4>
              <p v-if="item.assigneeName != null">{{ index == 0 ? "发起人" : "操作人" }}：{{ item.assigneeName }}</p>
              <p>
                <el-image v-for="(i,imgIndex) in item.processImgs" :key="imgIndex" class="flow-imgs-p" :src="i"
                          :initial-index="imgIndex" :preview-src-list="processImgs"></el-image>
              </p>
              <p v-if="item.comment != null">备 注：{{ item.comment }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-col>
    </el-row>
  </el-card>

  <el-dialog v-model="disposeVisible" title="处理告警" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef"
             :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
      <el-form-item label="处理方案" prop="handleContent">
        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" maxlength="300" show-word-limit
                  v-model="dataForm.handleContent"></el-input>
      </el-form-item>
    </el-form>
    <AutoUploadFile :action="uploadUrl" :data="datas" @change="change"></AutoUploadFile>
    <template v-slot:footer>
      <el-button @click="disposeVisible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="alarmHandleComplete()">{{ $t("confirm") }}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import {IObject} from "@/types/interface";
import baseService from "@/service/baseService";
import {defineComponent, reactive, toRefs} from "vue";
import {getToken} from "@/utils/cache";
import app from "@/constants/app";
import AutoUploadFile from './auto-upload-file.vue'

const warningTypeArr = (data: string) => {
  console.log(data)
  return data.split(",");
}

export default defineComponent({
  components: {
    AutoUploadFile
  },
  setup() {
    const state = reactive({
      createdIsNeed: false,
      // 表单属性是否可编辑
      fieldDisabled: false,
      // 是否任务处理
      runningHandleVisible: false,
      // 是否显示流程处理详情
      processDetailVisible: false,
      token: getToken(),
      activeName: "first",
      dataBusForm: {
        id: "",
        tenantCode: "",
        createDate: "",
        updateDate: "",
        pushDate: "",
        nvrName: "",
        cameraId: "",
        presetId: "",
        targetCodes: "",
        cameraAddr: "",
        picUrl: "",
        status: "",
        alarmCode: "",
        alarmName: "",
        depName: "",
        img: "",
        ip: "",
        addr: "",
        aiPicUrl: "",
        deleted: "",
        processingStatus: "",
        level: ""
      },
      dataForm: {
        id: "",
        taskId: "",
        processDefinitionId: "",
        processImgs: [],
        handleContent: ""
      },
      flowList: [] as any,
      disposeVisible: false,
      uploadUrl: `${app.api}/alarm/img/api/uploadFile?token=${getToken()}`,
      datas: {
        type: "WarningPictureFlow"
      },
      processImgs: []
      // linkageData: {}
    });
    return {...useView(state), ...toRefs(state), warningTypeArr};
  },
  created() {
    this.dataForm.id = this.$route.query.businessKey as string;
    this.dataForm.processDefinitionId = this.$route.query.processInstanceId as string;
    this.dataForm.taskId = this.$route.query.taskId as string;
    this.getInfo();
    this.getFlow();
  },
  computed: {
    dataRule(): IObject {
      return {
        applyPost: [{required: true, message: this.$t("validate.required"), trigger: "blur"}],
        entryDate: [{required: true, message: this.$t("validate.required"), trigger: "blur"}],
        correctionDate: [{required: true, message: this.$t("validate.required"), trigger: "blur"}],
        workContent: [{required: true, message: this.$t("validate.required"), trigger: "blur"}],
        achievement: [{required: true, message: this.$t("validate.required"), trigger: "blur"}],
        handleContent: [{required: true, message: this.$t("validate.required"), trigger: "blur"}]
      };
    }
  },
  methods: {
    // 获取表单详情信息
    getInfo() {
      baseService.get(`/KxWarningPic/kxwarningpic/${this.dataForm.id}`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.dataBusForm = res.data;
        this.processImgs = [];
        if (res.data.processImgs != null) {
          res.data.processImgs.split(";").forEach((i: string) => {
            this.processImgs.push(this.imgUrl(i));
          })
          this.flowList[1].processImgs = this.processImgs;
        }
        console.log(this.processImgs)
        // this.getByAlarmId(res.data.cameraId)
      });
    },
    // 获取流程信息
    getFlow() {
      baseService.get(`/flow/common/historic/list?processInstanceId=${this.dataForm.processDefinitionId}`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.flowList = res.data;
      });
    },
    change(urls) {
      this.dataForm.processImgs = [];
      urls.forEach((i) => {
        this.dataForm.processImgs.push(i.data);
      })
      console.log(this.dataForm.processImgs)
    },
    // 去处理
    alarmHandleComplete() {
      this.$refs["dataFormRef"].validate((valid: boolean) => {
        if (!valid) {
          return false;
        }
        let params = {
          id: this.dataForm.id,
          taskId: this.dataForm.taskId,
          processImgs: this.dataForm.processImgs.join(";"),
          handleContent: this.dataForm.handleContent
        };
        baseService
            .post("/cameraAlarm/kxcameraalarm/alarmHandleComplete", params)
            .then((res) => {
              if (res.code !== 0) {
                this.$message.error(res.msg);
                return;
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.disposeVisible = false;
                  this.closeCurrentTab();
                }
              });
            });
      });
    },
    // 图片路径拼接
    imgUrl(url: string) {
      return `${app.api}/KxWarningPic/kxwarningpic/getImage?token=${getToken()}&filePath=` + url;
    },
    // getByAlarmId(alarmId) {
    //   baseService.get(`/kxCameraAlarmSnap/kxcameraalarmsnap/getByAlarmId/${alarmId}`).then((res) => {
    //     if (res.code !== 0) {
    //       return this.$message.error(res.msg);
    //     }
    //     this.linkageData = res.data;
    //   });
    // }
  }
});
</script>

<style lang="scss" scoped>
.item-text {
  color: #FFFFFF;
}

.title-p {
  border-left: 4px solid #ffff00;
  padding-left: 10px;
  font-size: 16px;
  color: rgba(127, 29, 29, 0.86);
  font-weight: 500;
}

.imgbox {
  width: 100%;
  height: 300px;
}

.flow-imgs-p {
  margin-right: 10px;
  width: 80px;
  height: 60px;
}
</style>
